<template>
<el-container class="container">
    <el-header class="header">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <img src="../assets/logo.png" alt="">
                </div>
            </el-col>
            <el-col :span="19" class="middle">
                <h2>电商后台管理系统</h2>
            </el-col>
            <el-col :span="1">
                <a href="#" class="loginout" @click.prevent="handleLogout">退出</a>
            </el-col>
        </el-row>
    </el-header>
    <el-container>
        <el-aside class="aside" width="200px">
            <!-- default-active:默认展开项
          :unique-opened: 只允许同时展开一项
          :router 开启路由模式
          开启后, 设置el-menu-item的index值 为路由标识
        -->
            <el-menu default-active="2-1" class="menu" :unique-opened="true" :router="true">
                <!-- 用户管理-->
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>品牌管理</span>
                    </template>
                    <el-menu-item index="brandList">
                        <i class="el-icon-location"></i>
                        品牌列表
                    </el-menu-item>
                </el-submenu>
                <!-- 权限管理-->
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>權限管理</span>
                    </template>
                    <el-menu-item index="about">
                        <i class="el-icon-menu"></i>
                        角色列表 about
                    </el-menu-item>
                    <el-menu-item index="/rights">
                        <i class="el-icon-view"></i>
                        權限列表
                    </el-menu-item>
                </el-submenu>
                <!-- 商品管理-->
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item index="3-1">
                        <i class="el-icon-menu"></i>
                        商品列表
                    </el-menu-item>
                    <el-menu-item index="bookList">
                        <i class="el-icon-view"></i>
                        图书列表 
                    </el-menu-item>
                    <el-menu-item index="3-1">
                        <i class="el-icon-view"></i>
                        商品分類
                    </el-menu-item>
                </el-submenu>
                <!--订单管理-->
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>訂單管理</span>
                    </template>
                    <el-menu-item index="4-1">
                        <i class="el-icon-location"></i>
                        訂單列表
                    </el-menu-item>
                </el-submenu>
                <!--数据统计-->
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>數據統計</span>
                    </template>
                    <el-menu-item index="5-1">
                        <i class="el-icon-location"></i>
                        數據報表
                    </el-menu-item>
                </el-submenu>

            </el-menu>
        </el-aside>
        <el-main class="main">
            <router-view></router-view>
        </el-main>
    </el-container>
</el-container>
</template>

<script>
export default {
    beforeCreate() {
        const token = localStorage.getItem("token");
        if (!token) {
            // 进入登录页
            this.$router.push("/login");
            this.$message.warning("请登录 ！")
        }

    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleLogout() {
            // 删除令牌
            localStorage.removeItem("token");
            // 导航到登录页面
            this.$router.push("/login");
            // 给一个消息
            this.$message.success("已退出 ！")
        }
    }
}
</script>

<style scoped>
.container {
    height: 100%;
}

.header {
    background-color: #b3c0d1;
}

.aside {
    background-color: #d3dce6;
}

.main {
    background-color: #e9eef3;
    height: 100%;
}

/* header css */
.header .middle {
    line-height: 60px;
    color: #fff;
    text-align: center;
}

.header .loginout {
    line-height: 60px;
    text-decoration: none;
}

.header img {
    height: 50px;
}
</style>
